<template>
	<view class="container">
		<!-- 订单号扫码/输入区 -->
		<view class="custom-card">
			<view class="card-title">订单号扫码/输入</view>
			<u-input v-model="orderNoInput" placeholder="请输入或扫码订单号" @confirm="onOrderNoConfirm" clearable>
				<u-icon slot="append" name="scan" size="28" color="#2979ff" @click="onScanOrderNo" />
			</u-input>
			<u-button type="primary" size="mini" style="margin-top: 18rpx;" @click="onOrderNoConfirm">确定</u-button>
			<view v-if="orderNoFinal" class="order-info">当前订单号：<text class="order-no">{{ orderNoFinal }}</text></view>
		</view>

		<!-- 产品明细及扫码区 -->
		<view v-if="orderNoFinal" class="custom-card">
			<view class="card-title">产品明细与扫码</view>
			<view v-if="orderSkuList.length === 0" class="sku-empty">未查到订单明细</view>
			<view v-else>
				<view class="sku-list">
					<view class="sku-row sku-header">
						<text class="sku-col sku-name">SKU</text>
						<text class="sku-col sku-title">名称</text>
						<text class="sku-col sku-loc">库位</text>
						<text class="sku-col sku-qty">应出库</text>
						<text class="sku-col sku-scan">已扫</text>
					</view>
					<view class="sku-row" v-for="sku in orderSkuList" :key="sku.id">
						<text class="sku-col sku-name">{{ sku.id }}</text>
						<text class="sku-col sku-title">{{ sku.name }}</text>
						<text class="sku-col sku-loc">{{ sku.location }}</text>
						<text class="sku-col sku-qty">{{ sku.quantity }}</text>
						<text class="sku-col sku-scan">{{ sku.scanned }}</text>
					</view>
				</view>
				<u-input v-model="barcodeInput" placeholder="请扫码或输入产品条码" @confirm="onScanSku" clearable style="margin-top: 24rpx;">
					<u-icon slot="append" name="scan" size="28" color="#2979ff" @click="onScanSkuBtn" />
				</u-input>
				<u-button type="primary" size="mini" style="margin-top: 18rpx;" @click="onScanSku">扫码/录入</u-button>
				<view class="sku-scan-summary">已扫描：<text class="sku-scan-count">{{ totalScanned }}</text> / <text>{{ totalRequired }}</text> 件</view>
				<u-button type="success" style="margin-top: 24rpx;" :disabled="!canSubmit" @click="onOutbound">确认出库</u-button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderNoInput: '',
			orderNoFinal: '',
			barcodeInput: '',
			orderSkuList: [], // {id, name, location, quantity, scanned}
			skuDb: [
				{ id: 'sku1', name: '商品A', location: 'A区-01', quantity: 5 },
				{ id: 'sku2', name: '商品B', location: 'A区-02', quantity: 3 },
				{ id: 'sku3', name: '商品C', location: 'B区-01', quantity: 2 }
			],
			orderDb: [
				{ orderNo: 'ORDER001', skus: [
					{ id: 'sku1', quantity: 2 },
					{ id: 'sku2', quantity: 1 }
				] },
				{ orderNo: 'ORDER002', skus: [
					{ id: 'sku2', quantity: 2 },
					{ id: 'sku3', quantity: 2 }
				] }
			]
		}
	},
	computed: {
		totalScanned() {
			return this.orderSkuList.reduce((sum, sku) => sum + sku.scanned, 0)
		},
		totalRequired() {
			return this.orderSkuList.reduce((sum, sku) => sum + sku.quantity, 0)
		},
		canSubmit() {
			return this.orderSkuList.length > 0 && this.orderSkuList.every(sku => sku.scanned >= sku.quantity && sku.quantity > 0)
		}
	},
	methods: {
		onScanOrderNo() {
			uni.scanCode({
				success: (res) => {
					this.orderNoInput = res.result
					this.onOrderNoConfirm()
				},
				fail: () => {
					uni.$u.toast('扫码失败')
				}
			})
		},
		onOrderNoConfirm() {
			const code = this.orderNoInput.trim()
			if (!code) {
				uni.$u.toast('请输入或扫码订单号')
				return
			}
			this.orderNoFinal = code
			// 查找订单明细
			const found = this.orderDb.find(o => o.orderNo === code)
			if (found) {
				// 合并SKU信息
				this.orderSkuList = found.skus.map(item => {
					const skuInfo = this.skuDb.find(s => s.id === item.id) || {}
					return {
						id: item.id,
						name: skuInfo.name || '',
						location: skuInfo.location || '',
						quantity: item.quantity,
						scanned: 0
					}
				})
			} else {
				this.orderSkuList = []
				uni.$u.toast('未找到订单明细')
			}
		},
		onScanSkuBtn() {
			uni.scanCode({
				success: (res) => {
					this.barcodeInput = res.result
					this.onScanSku()
				},
				fail: () => {
					uni.$u.toast('扫码失败')
				}
			})
		},
		onScanSku() {
			const code = this.barcodeInput.trim()
			if (!code) {
				uni.$u.toast('请输入或扫码产品条码')
				return
			}
			// 假设条码即skuId
			const sku = this.orderSkuList.find(s => s.id === code)
			if (!sku) {
				uni.$u.toast('该条码不在订单明细中')
				this.barcodeInput = ''
				return
			}
			if (sku.scanned >= sku.quantity) {
				uni.$u.toast('该SKU已扫完')
				this.barcodeInput = ''
				return
			}
			sku.scanned++
			this.barcodeInput = ''
		},
		onOutbound() {
			uni.showModal({
				title: '确认出库',
				content: `确认将订单 ${this.orderNoFinal} 出库？`,
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({ title: '出库中...' })
						setTimeout(() => {
							uni.hideLoading()
							uni.showToast({ title: '出库成功', icon: 'success' })
							this.orderNoInput = ''
							this.orderNoFinal = ''
							this.barcodeInput = ''
							this.orderSkuList = []
						}, 1000)
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 8rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.custom-card {
	padding: 20rpx;
	margin-bottom: 8rpx;
	background: #fff;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
}

.card-title {
	font-size: 22rpx;
	font-weight: 500;
	margin-bottom: 12rpx;
}

.order-info {
	margin-top: 12rpx;
	font-size: 26rpx;
	color: #2979ff;
}

.order-no {
	font-weight: bold;
}

.sku-list {
	margin-bottom: 18rpx;
}

.sku-row {
	display: flex;
	align-items: center;
	padding: 8rpx 0;
}

.sku-header {
	font-weight: bold;
	color: #2979ff;
	border-bottom: 1rpx solid #e9ecef;
}

.sku-col {
	flex: 1;
	text-align: center;
	font-size: 22rpx;
}

.sku-name {
	flex: 1.5;
}

.sku-title {
	flex: 2;
}

.sku-loc {
	flex: 1.5;
}

.sku-qty {
	flex: 1;
}

.sku-scan {
	flex: 1;
	color: #fa3534;
}

.sku-empty {
	color: #999;
	font-size: 24rpx;
	text-align: center;
	margin: 30rpx 0;
}

.sku-scan-summary {
	margin-top: 18rpx;
	font-size: 26rpx;
	color: #333;
}

.sku-scan-count {
	color: #fa3534;
	font-weight: bold;
}
</style> 